<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.0/css/bootstrap.min.css">
    <link rel="stylesheet" href="sytle.css">
    <script src="../template.js"></script>
    <script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>
    <script src="http://cdn.bootcss.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
</head>
<body>
<div class="date container">
    <div class="title clearfix">
        <div class="titleL"><a>上一月</a></div>
        <div class="titleM"></div>
        <div class="titleR"><a>下一月</a></div>
    </div>
    <ul class="weekday list-inline"></ul>
    <ul class="date-preMonth list-inline"></ul>
    <ul class="date-days list-inline">
    </ul>
</div>
</body>
<script type="text/html" id="date-days">
    {{each list as value}}
    <li>{{value}}</li>
    {{/each}}
</script>
<script>
    var mm = function(){
        var arr =  ["日", "一", "二", "三", "四", "五", "六"];
        $(".date-preMonth").each(function(i){
            $("<li>").appendTo(this).html(arr[i]);
        })
    }
    var d = new Date();
    var month = d.getMonth() + 1;
    $(".titleM").html(d.getFullYear()+"年"+ month + "月");
    var daysArr = [];
    var days, i,j;
    if([2].indexOf(month) != -1){
        days = 28;
    }
    else if([4,6,9,11].indexOf(month) != -1){
        days = 30;
    }
    else{
        days = 31;
    }
    for(i=0; i< days; i++){
        daysArr.push(i+1);
    }
    d.setDate(1);
    var idx = d.getDay();
    for(j=0;j<idx;j++){
        daysArr.unshift("");
    }
    $(".date-days").html(
            template("date-days",{
                list: daysArr
            })
    );
    $(".weekday").html(
            template("date-days",{
                list: ["日","一","二","三","四","五","六"]
            })
    );
    $(".titleL").on("click",function(){

    });

</script>
</html>